<template>
  <div id="app">
    <el-row class="nav">
      <!-- 用ref来修改子元素type的时候vue不建议我直接修改dom-->
      <el-button :type="pagenum > -1 ? 'primary' : ''">前言</el-button>
      <el-button :type="pagenum > 0 ? 'primary' : ''">计划</el-button>
      <el-button :type="pagenum > 1 ? 'primary' : ''">1</el-button>
      <el-button :type="pagenum > 2 ? 'primary' : ''">2</el-button>
      <el-button :type="pagenum > 3 ? 'primary' : ''">3</el-button>
      <el-button :type="pagenum > 4 ? 'primary' : ''">4</el-button>
      <el-button :type="pagenum > 5 ? 'primary' : ''">5</el-button>
      <el-button :type="pagenum > 6 ? 'primary' : ''">6</el-button>
      <el-button :type="pagenum > 7 ? 'primary' : ''">7</el-button>
      <el-button :type="pagenum > 8 ? 'primary' : ''">8</el-button>
    </el-row>

    <!-- 按钮部分 -->
    <el-button-group class="pagebtn" v-if="pagenum == 1">
      <el-button type="primary" @click="nextpage()"
        >完成计划，开始解题</el-button
      >
    </el-button-group>
    <el-button-group class="pagebtn" v-if="pagenum > 1">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        @click="backpage()"
        :disabled="pagenum > 9"
        >上一页</el-button
      >
      <el-button type="primary" @click="nextpage()" :disabled="pagenum > 9"
        >下一页<i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>
    </el-button-group>
    <div class="cxt" v-if="pagenum == 0">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="felxbox">
          <img src="./assets/img/图片2.png" alt="" style="height:780px" />
        </div>
      </div>
      <div class="rightcxt">
        <el-row type="flex" justify="center">
          <el-col
            :span="20"
            style="margin-top:200px;height:130px;width:570px;"
            class="text"
          >
            <h3>
              最近，在网上出现了如图所示的一则报道。你觉得这则报道真实吗？请来验证一下吧！<br />
              【你可以通过点击、输入等方式来完成题目的作答】
            </h3>
            <br />
            <el-button
              type="primary"
              @click="nextpage()"
              class="fontsize30 bigbtn"
              style="margin:50px 160px;"
              >开始答题</el-button
            >
          </el-col>
        </el-row>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-show="pagenum == 1">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/图片2.png" alt="" style="height:780px" />
      </div>
      <div class="rightcxt">
        <div class="title flexbox">
          <h2>
            计划
          </h2>
        </div>
        <div class="text flexbox">
          为了验证这个报道，请你先计划一下解决问题的过程。<br />
          【点击下方每一步的下拉按钮，选择每一步要做的事情。完成后，请点击“完成计划，开始解题”。】
        </div>
        <div style="font-size:36px;margin:50px 200px;">
          我的顺序：
        </div>

        <div class="answerimg">
          <Drag></Drag>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 2">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/图片2.png" alt="" style="height:780px" />
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第1题【单选题】</h2></div>
        <div class="text flexbox" style="font-size:30px;line-height: 50px;">
          为了简化这个问题，下列哪个选项是你解决问题所需要提出的假设？
        </div>
        <div class="optionbox">
          <el-radio v-model="$store.state.answer[1]" label="1" @change="updata()">
            A. 假设一家四口分别是爸爸、妈妈、儿子和女儿。 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[1]" label="2" @change="updata()"
            >B. 假设家中四口人使用同一支牙膏。</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[1]" label="3" @change="updata()"
            >C. 假设家中四口人每天都刷牙。</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[1]" label="4" @change="updata()">
            D. 假设每次刷牙浪费的水量是不相同的。
          </el-radio>
        </div>
      </div>

      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 3">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/图片2.png" alt="" style="height:780px" />
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第2题【多选题】</h2></div>
        <div class="text flexbox" style="font-size:30px;line-height: 50px;">
          请收集对于解决问题有用的信息。
        </div>
        <div class="flexbox">
          <el-checkbox-group
            v-model="$store.state.answer[2]"
            @change="updata()"
            class="multiselect"
          >
            <el-checkbox label="1">每人每天要刷2次牙 </el-checkbox>
            <el-checkbox label="2">牙刷的长度为18厘米 </el-checkbox><br />
            <el-checkbox label="3">漱口杯的容量为500毫升 </el-checkbox>
            <el-checkbox label="4">水龙头1分钟会流出3升水 </el-checkbox><br />
            <el-checkbox label="5"> 每次刷牙要使用1厘米牙膏</el-checkbox>
            <el-checkbox label="6"
              >每次正常刷牙使用1升水<br />（用于漱口、冲洗牙刷等） </el-checkbox
            ><br />
            <el-checkbox label="7">每次刷牙平均需要3分钟 </el-checkbox>
            <el-checkbox label="8">刷牙时的水温为25摄氏度 </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 4">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/图片2.png" alt="" style="width:280px" />
          <div class="p3info">
            <el-tag style="background-color: #409EFF;">收集的信息</el-tag><br />
            <el-tag
              v-for="(item, index) in page2answer"
              :key="index"
              class="w300"
            >
              {{ item }}
            </el-tag>
          </div>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第3题【单选题】</h2></div>
        <div class="text flexbox" style="font-size:30px;line-height: 50px;">
          请根据你收集的信息，判断下列哪个表达式能够表示每一次刷牙所浪费的水量？
        </div>
        <div class="optionbox">
          <div>
            <el-radio v-model="$store.state.answer[3]" label="1" @change="updata()">
              A. 每次刷牙平均需要3分钟<b class="symbol"
                ><b class="symbol" style="top:2px;">╳</b></b
              >水龙头1分钟会流出3升水
            </el-radio>
            <el-radio
              v-model="$store.state.answer[3]"
              label="2"
              style="  padding-bottom: 30px;"
              @change="updata()">
              B. 每次刷牙平均需要3分钟<b class="symbol">╳</b
              >水龙头1分钟会流出3升水<br />
              <b class="symbol" style="font-size:40px;">-</b>每次正常刷牙使用1升水
            </el-radio>
            <el-radio
              v-model="$store.state.answer[3]"
              label="3"
              style="  padding-bottom: 30px;"
              @change="updata()"
            >
              C. 每次刷牙平均需要3分钟<b class="symbol">╳</b
              >水龙头1分钟会流出3升水<br /><b class="symbol">+</b
              >每次正常刷牙使用1升水
            </el-radio>
            <el-radio
              v-model="$store.state.answer[3]"
              label="4"
              style="  padding-bottom: 30px;"
              @change="updata()"
            >
              D. 每人每天要刷2次牙<b class="symbol">╳</b
              >（每次刷牙平均需要3分钟<b class="symbol">╳</b
              ><br />水龙头1分钟会流出3升水
              <b class="symbol">-</b> 每次正常刷牙使用1升水）
            </el-radio>
          </div>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 5">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/图片2.png" alt="" style="height:480px;" />
                            <div class="p5text">如果虚拟键盘中没有找到你想用的信息，会不会是因为在信息收集时有遗漏呢？</div>

      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第4题【填空题】</h2></div>
        <div
          class="text flexbox"
          style="height:120px;line-height:30px;font-size:25px;"
        >
          请利用你收集的信息和运算符号，列出一个四口之家每周刷牙浪费水量的表达式。<br />
          例如：一个四口之家每天刷牙的次数=家中包括4个成员╳每人每天要刷2次牙╳每人每天要刷2次牙
        </div>
        <Computer1 :page2answer="page2answer" />
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 6">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/图片2.png" alt="" style="width:280px" />
          <div class="p3info">
            <el-tag style="background-color: #409EFF;">收集的信息</el-tag><br />
            <el-tag
              v-for="(item, index) in page2answer"
              :key="index"
              class="w300"
            >
              {{ item }}
            </el-tag>
          </div>
          <div class="p6expression">
            <el-tag style="background-color: #409EFF;  border: 3px solid #000;"
              >你的表达式</el-tag
            >
            <div class="expressionbox">
              一个四口之家每周刷牙浪费水量={{ $store.state.answer[4] }}
            </div>
          </div>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第5题【填空题】</h2></div>
        <div
          class="text flexbox"
          style="height:120px;line-height:36px;font-size:25px;"
        >
          请根据你建立的表达式，计算一个四口之家每周刷牙浪费水量，将计算结果填写在作答框中。<br />
          注：如结果为无限小数，仅保留一位小数。
        </div>
        <div class="flexbox">
          <Computer2 />
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 7">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/图片2.png" alt="" style="width:280px" />
          <div class="p3info">
            <el-tag style="background-color: #409EFF;">收集的信息</el-tag><br />
            <el-tag
              v-for="(item, index) in page2answer"
              :key="index"
              class="w300"
            >
              {{ item }}
            </el-tag>
          </div>
          <div class="p6expression">
            <el-tag style="background-color: #409EFF;  border: 3px solid #000;"
              >你的表达式</el-tag
            >
            <div class="expressionbox">
              一个四口之家每周刷牙浪费水量={{ $store.state.answer[4] }}
            </div>
          </div>
          <div class="p6expression2">
            <el-tag style="background-color: #409EFF;  border: 3px solid #000;"
              >你的结果</el-tag
            >
            <p class="expressionbox">
              一个四口之家每周刷牙浪费水量={{ $store.state.answer[5] }}升
            </p>
          </div>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第6题【单选题】</h2></div>
        <div class="text flexbox">
          如果水龙头1分钟流出的水量变为2升，而每次刷牙平均需要时间变为4分钟，其他条件不变，那么一个四口之家每周刷牙浪费水量会怎样变化？
        </div>
        <div class="optionbox flexbox" style="display:block;">
          <el-radio v-model="$store.state.answer[6]" label="1" @change="updata()">
            A. 每周刷牙浪费的水量不变。 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[6]" label="2"
          @change="updata()"
            >B. 每周刷牙浪费的水量会增加。 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[6]" label="3"
            @change="updata()">C. 每周刷牙浪费的水量会减少。 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[6]" label="4" @change="updata()">
            D. 每周刷牙浪费的水量变化无法判断。
          </el-radio>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 8">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/图片2.png" alt="" style="width:280px" />
          <div class="p3info">
            <el-tag style="background-color: #409EFF;">收集的信息</el-tag><br />
            <el-tag
              v-for="(item, index) in page2answer"
              :key="index"
              class="w300"
            >
              {{ item }}
            </el-tag>
          </div>
          <div class="p6expression">
            <el-tag style="background-color: #409EFF;  border: 3px solid #000;"
              >你的表达式</el-tag
            >
            <div class="expressionbox">
              一个四口之家每周刷牙浪费水量={{ $store.state.answer[4] }}
            </div>
          </div>
          <div class="p6expression2">
            <el-tag style="background-color: #409EFF;  border: 3px solid #000;"
              >你的结果</el-tag
            >
            <p class="expressionbox">
              一个四口之家每周刷牙浪费水量={{ $store.state.answer[5] }}升
            </p>
          </div>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox" style="width:360px">
          <h2>第7题【单选题】</h2>
        </div>

        <div class="text flexbox" style="height:50px">
          请你根据计算的结果，判断这则报道是否可信并说明理由。
        </div>
        <div style=" width:300px;font-size:30px;">
          我的判断是:
        </div>
        <div class="optionbox" style="margin-top:-5px;">
          <el-radio v-model="$store.state.answer[7]" label="1" @change="updata()">
            <b style="color:black">我认为这则报道是可信的</b> </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[7]" label="2"
             @change="updata()"><b style="color:black">我认为这则报道是不可信的</b>
          </el-radio>
          <div style="width:300px;font-size:30px;">
            我的理由是：
          </div>
          <el-radio v-model="$store.state.answer[8]" label="0" @change="updata()">
            <b style="color:black"
              >A. 因为我计算出的结果和报道中的数据差不多</b
            > </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[8]" label="1"
         @change="updata()"
            ><b style="color:black"
              >B. 因为我计算出的结果和报道中的数据完全相同</b
            >
          </el-radio>
          <el-radio v-model="$store.state.answer[8]" label="2" @change="updata()">
            <b style="color:black"
              >C. 因为我计算出的结果比报道中的数据大</b
            > </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[8]" label="3" @change="updata()"
            ><b style="color:black">D. 因为我计算出的结果比报道中的数据小</b>
          </el-radio>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 9">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/图片2.png" alt="" style="width:280px" />
          <div class="p3info">
            <el-tag style="background-color: #409EFF;">收集的信息</el-tag><br />
            <el-tag
              v-for="(item, index) in page2answer"
              :key="index"
              class="w300"
            >
              {{ item }}
            </el-tag>
          </div>
          <div class="p6expression">
            <el-tag style="background-color: #409EFF;  border: 3px solid #000;"
              >你的表达式</el-tag
            >
            <div class="expressionbox">
              一个四口之家每周刷牙浪费水量={{ $store.state.answer[4] }}
            </div>
          </div>
          <div class="p6expression2">
            <el-tag style="background-color: #409EFF;  border: 3px solid #000;"
              >你的结果</el-tag
            >
            <p class="expressionbox">
              一个四口之家每周刷牙浪费水量={{ $store.state.answer[5] }}升
            </p>
          </div>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第8题【单选题】</h2></div>
        <div class="text flexbox">
          请判断下列情况可能导致实际结果比你计算的结果更大、更小还是不变。
        </div>
        <div class="p8optionchoose">
          <div>
            实际上平均每次刷牙的时间超过了3分钟<br />

            <el-radio v-model="$store.state.answer[9]" label="1" @change="updata()">
              更大
            </el-radio>
            <el-radio v-model="$store.state.answer[9]" label="2" @change="updata()"
              >更小
            </el-radio>
            <el-radio v-model="$store.state.answer[9]" label="3" @change="updata()"
              >不变
            </el-radio>
          </div>
          <div>
            实际上平均每次刷牙使用的牙膏长度多于1厘米<br />

            <el-radio v-model="$store.state.answer[10]" label="1" @change="updata()">
              更大
            </el-radio>
            <el-radio v-model="$store.state.answer[10]" label="2" @change="updata()"
              >更小
            </el-radio>
            <el-radio v-model="$store.state.answer[10]" label="3" @change="updata()"
              >不变
            </el-radio>
          </div>
          <div>
            实际上有时两个人会一起刷牙<br />

            <el-radio v-model="$store.state.answer[11]" label="1" @change="updata()">
              更大
            </el-radio>
            <el-radio v-model="$store.state.answer[11]" label="2" @change="updata()"
              >更小
            </el-radio>
            <el-radio v-model="$store.state.answer[11]" label="3" @change="updata()"
              >不变
            </el-radio>
          </div>
          <div>
            实际上平均正常刷牙使用的水量小于1升<br />
            <el-radio v-model="$store.state.answer[12]" label="1" @change="updata()">
              更大
            </el-radio>
            <el-radio v-model="$store.state.answer[12]" label="2" @change="updata()"
              >更小
            </el-radio>
            <el-radio v-model="$store.state.answer[12]" label="3" @change="updata()"
              >不变
            </el-radio>
          </div>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 10">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="felxbox">
          <img src="./assets/img/图片2.png" alt="" style="height:780px" />
        </div>
      </div>
      <div class="rightcxt">
        <el-row type="flex" justify="center">
          <div style="margin:200px 20px;width:520px;">
            <h2>
              太棒啦！你成功地用数学的方法验证了这则报道的可信性，明白了节约用水要从身边的小事做起。
            </h2>
            <br />
            <div type="primary" class="fontsize30 lastbtn">
              请先点击下方的【提交答案】，再点击【进入下一题】。
            </div>
          </div>
        </el-row>
      </div>
      <div class="verticalline"></div>
    </div>
  </div>
</template>

<script>
import Drag from "./components/Drag";
import Computer1 from "./components/Computer1";
import Computer2 from "./components/Computer2";
export default {
  name: "App",
  components: {
    Drag,
    Computer1,
    Computer2,
  },
  data() {
    return {
      pagenum: 0, //页数
      page2answerchoose: [
        "每人每天要刷2次牙",
        "牙刷的长度为18厘米",
        "漱口杯的容量为500毫升",
        "水龙头1分钟会流出3升水 ",
        "每次刷牙要使用1厘米牙膏",
        "每次正常刷牙使用1升水（用于漱口、冲洗牙刷等）",
        "每次刷牙平均需要3分钟",
        "刷牙时的水温为25摄氏度",
      ], //第二页的所有答案，需要显示所选答案的话用第二题选择的答案索引遍历所有答案数组既可
    };
  },
  computed: {
    //第二页选中的答案
    page2answer() {
      let list = [];
      for (let index = 0; index < this.$store.state.answer[2].length; index++) {
        list.push(
          this.page2answerchoose[this.$store.state.answer[2][index] - 1]
        );
      }
      return list;
    },
  },
  methods: {
    updata() {
      this.$store.state.pagenum=this.pagenum
      console.log(this.pagenum, this.$store.state.answer);
      parent.postMessage(this.$store.state, "*");
    },
    nextpage() {
      this.pagenum += 1;
      //提示判断
      if (
        this.pagenum === 2 &&
        (this.$store.state.answer[0][0] == "-1" ||
          this.$store.state.answer[0][1] == "-1" ||
          this.$store.state.answer[0][2] == "-1" ||
          this.$store.state.answer[0][3] == "-1")
      ) {
        this.nextopen();
      } else if (
        2 < this.pagenum &&
        this.pagenum < 9 &&
        (this.$store.state.answer[this.pagenum - 2] == "" ||
          this.$store.state.answer[this.pagenum - 2] == "-1")
      ) {
        this.nextopen();
      } else if (
        this.pagenum == 9 &&
        (this.$store.state.answer[7] == "-1" ||
          this.$store.state.answer[8] == "-1")
      ) {
        this.nextopen();
      } else if (this.pagenum == 10) {
        if (
          this.$store.state.answer[9] == "-1" ||
          this.$store.state.answer[10] == "-1" ||
          this.$store.state.answer[11] == "-1" ||
          this.$store.state.answer[12] == "-1"
        ) {
          this.nextopen();
        } else {
          this.pagenum -= 1;
          this.notarizeopen();
        }
      }
      this.updata();
    },
    nextopen() {
      this.pagenum -= 1;
      this.$alert("这个问题你还没做完，请作答后再进入下一页吧！", "提示", {
        confirmButtonText: "确定",
      });
    },
    backpage() {
      this.pagenum -= 1;
      console.log(this.pagenum, this.$store.state.answer);
    },
    hintopen() {
      this.$alert(
        "你可以点击“虚拟键盘”中的信息和符号，即可输入到作答框中，点击“删除”即可向前删除一个字母（数字或运算符号） ",
        "提示信息",
        {
          confirmButtonText: "返回题目",
        }
      );
    },
    notarizeopen() {
      this.$confirm(
        "即将提交全部答案，确认无误请点击“提交全部答案”。",
        "提示",
        {
          confirmButtonText: "提交全部答案",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.pagenum += 1;
          this.$message({
            type: "success",
            message: "提交全部答案!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消",
          });
        });
    },
  },
};
</script>

<style scope>
#app {
  width: 1200px;
  height: 800px;
  font-size: 20px;
  font-weight: 1000;
  line-height: 36px;
}
.lastbtn {
  width: 500px;
  height: 80px;
  padding: 30px;
  font-size: 36px;
  font-family: "楷体";
  position: absolute;
  top: 360px;
  left: 10px;
  background-color: #f5f7ae;
}

.bg-purple {
  width: 100px;
  height: 60px;
  background: #d3dce6;
}
.multiselect label {
  width: 250px;
  height: 60px;
  line-height: 60px;
  border: 3px solid #000;
  background-color: transparent;
  background-color: #99cc99;
  padding: 5px;
}

.multiselect .el-checkbox__label {
  font-size: 20px;
  font-weight: 1000;
  line-height: 30px;
}
.p5text {
  position: absolute;
  top: 500px;
  width: 520px;
  padding: 20px;
  height: 150px;font-size: 36px;
  line-height: 50px;
    background-color: #f5f7ae;
}
.expressionbox {
  width: 560px;
  height: 120px;
  overflow: auto;
  background-color: #ecf5ff;
  border: 3px solid #000;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 3px;
}
.p8optionchoose label {
  display: inline;
}
.p8optionchoose .el-radio__label {
  font-size: 20px !important;
  margin-top: 10px;
}
.p8optionchoose > div {
  width: 470px;
  height: 80px;
  margin: 10px 0px;
  padding-left: 100px;
  background-color: #99cc99;
  font-size: 20px !important;
}
.p3info {
  position: absolute;
  top: 0px;
  left: 290px;
  width: 300px;
}
.p3info span {
  border: 3px solid #000;
  margin: 3px 0px;
}
.p6expression {
  position: absolute;
  top: 430px;
  left: 0px;
}
.p6expression2 {
  position: absolute;
  top: 600px;
  left: 0px;
}
.symbol {
  position: relative;
  top: 5px;
  font-size: 36px;
}
</style>
